A colleague recently came to me with a question about an existing web project that he had “inherited”. His question was about heading levels. HTML only has six, and this project had way more than six. If you removed the headings, there would be very little content left. Due to various constraints, he had limited options to solve the problem, so we had a chat about it.
This is not an unusual situation. In apps and websites, it’s easy to mistake the visual hierarchy as accurately representing the appropriate structural hierarchy. This particular design’s visual hierarchy made many things appear to be headings. But should they be? Ideally, visual hierarchy should reflect structural hierarchy. But it can be hard to see the structure through the styling.
The advice I tend to give is a form of designing in text: take the entire text content of the design and paste it into a word processor. Now your job is to make that content work within the context of the text document. No layout, no colors. Just basic word processing styles like headings, quotes, and the like. If the document were your final deliverable, how would you structure it? What would be a heading? What would be a subheading? What would just be body text? What is the linear order? Try to make it so that if you let the program create a table of contents automatically, that table of contents would reflect the content as accurately as possible. I use “Word documents” as an example, but thinking in terms of something like Markdown works just as well.
Often, the resulting structure will be much simpler. Stripping the content of its visual context allows you to see it for what it is, examine it, and in turn make more appropriate visual design decisions.